<template>
	<view class="wander-container init-page">
		<!-- #ifndef MP-WEIXIN -->
		<myuni-topbar>
		  <template v-slot:title>
			<text>新歌</text>
		  </template>
		</myuni-topbar>
		<!-- #endif -->
		<view class="main-list">
			<uni-list class="list">
			    <uni-list-item v-for="(item,index) in newSong" :title="item.name" :note="item.song.artists[0].name" @click.native="enterNewMusic(item,index)">
					 <template slot="footer">
						 <view class="control">
						 	<i class="has-mv iconfont icon-bg-play"></i>
						 	<i class="detail iconfont icon-gedan"></i>
						 </view>
					 </template>
			    </uni-list-item>
			</uni-list>
			<view class="all-btn" @click="getAllPlaylist">
				查看完整歌单<uni-icons type="arrowright"></uni-icons>
			</view>
		</view>
		<!-- recommend-new-song end -->
		<myuni-player v-if="currntSong"  :currntSong="currntSong" @emitChangeSong="ChangeSong"></myuni-player>
		<!-- aside-start -->
	</view>
</template>

<script>
	import { mapState } from 'vuex';
export default{
	data(){
		return {
			id:null,
			newSong:[],
			desc:{},
			currntSong:null,
			single:true
		}
	},
	onLoad(option) {
		this.id = option.id
		this.initData()
		if(uni.getStorageSync('music').url){
			console.log('本地有音乐')
			var music = uni.getStorageSync('music')
			this.currntSong = music
		}
	},
	computed:{
		...mapState(['themeType'])
	},
	methods:{
		initData(){
			// // 获取新音乐
			this.request({
				url:"/personalized/newsong"
			}).then(res=> {
				this.newSong=res.result
			})
		},
	    enterNewMusic(item,index){
			index&&(item.index=index)
	    	const {picUrl,name}=item
	    	const {name:singer,id:singerId}=item.song.artists[0]
	    	this.request({
	    		url:'/song/url?id='+item.id
	    	}).then(res=>{
	    		uni.setStorageSync('music',{id:res.data[0].id,picUrl,name,singer,singerId,url:res.data[0].url,playing:true,index:item.index,type:'newMusic'})
	    		console.log(uni.getStorageSync('music'))
	    		this.currntSong = uni.getStorageSync('music')
	    		console.log(this.currntSong)
	    	})
	    },
		ChangeSong(isNext){
				let playlist=uni.getStorageSync('playlist')
				console.log(this.currntSong.index)
				if(isNext){
					var index
					this.currntSong.index===playlist.length-1?index=0:index=this.currntSong.index+1
				}else{
					var index
					this.currntSong.index===0?index=playlist.length-1:index=this.currntSong.index-1
				}
				playlist[index].index=index
				console.log(playlist[index])
				console.log(index)
				if(this.currntSong.type==='playlist'){
					this.getSong(playlist[index])
				}
				else if(this.currntSong.type==='newMusic'){
					this.enterNewMusic(playlist[index])
				}
		},
		getAllPlaylist(){
			this.request({
				url:"/personalized/newsong?limit=99"
			}).then(res=> {
				this.newSong=res.result
				uni.setStorageSync('playlist',this.newSong)
			})
		},
		open(){
		        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
		        this.$refs.popup.open('top')
		}
	}
}
</script>

<style lang="scss" scoped>
page{
	background: linear-gradient(to bottom,#2a3740,#3e4a55,#435060);
}
.wander-container{
	.main-list{
		// margin-top: 100rpx;
		.content{
			box-sizing: border-box;
			position: relative;
			padding:60rpx 20rpx 0rpx;
			margin-top: -40rpx;
			opacity: .5;
			.tips{
				font-size: 22rpx;
				color: #ccc;
			}
			.list{
				background-color: unset;
				background-color: red;
				overflow: hidden;
				::v-deep.uni-list-item{
					background-color: unset !important;
					.uni-list-item__content-title{
						color: #fff;
					}
					.has-mv{
						margin-right: 40rpx;
						line-height: 76rpx;
						color: red;
					}
					.detail{
						line-height: 76rpx;
					}
				}
				::v-deep.uni-list--border-top,::v-deep.uni-list--border-bottom{
					height: 0;
				}
			}
		}
		.all-btn{
			height: 100rpx;
			line-height: 100rpx;
			width: 100%;
			text-align: center;
			color: #fff;
		}
	}
	::v-deep.player-container{
		bottom: 0;
	}
}
</style>
